<template>
  <div class="chat-window">
    <!-- 顶部标题栏 -->
    <div class="chat-header">
      <el-avatar :src="chatPartnerAvatar" class="header-avatar"></el-avatar>
      <span class="chat-partner-name">{{ chatPartnerName }}</span>
    </div>


    <!--    聊天内容-->
    <div class="chat-content">
      <el-row v-for="(message, index) in messages" :key="index" :class="message.type">
        <el-col :span="24" class="message-wrapper">
          <div class="message-content">
            <el-avatar :src="message.avatar" class="avatar"></el-avatar>
            <div class="text">
              <div class="time">{{ message.time }}</div>
              <div>{{ message.text }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>



    <div class="sent-ipt">
      <el-input
        v-model="newMessage"
        placeholder="发送信息"
        @keyup.enter.native="sendMessage"
        class="message-input"
      >
        <template slot="append">
          <el-button @click="sendMessage" type="primary">发送</el-button>
        </template>
      </el-input>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chatPartnerName: '张三',
      chatPartnerAvatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80',
      newMessage: '',
      messages: [
        {
          text: '你好',
          type: 'received',
          avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80',
          time: '2024-08-22 10:00',
        },
        {
          text: '再见',
          type: 'sent',
          avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80',
          time: '2024-08-22 10:01',
        },
      ],
    };
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim() !== '') {
        const currentTime = new Date().toLocaleString();
        this.messages.push({
          text: this.newMessage,
          type: 'sent',
          avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80',
          time: currentTime,
        });
        this.newMessage = '';

        // 模拟接收消息
        setTimeout(() => {
          this.receiveMessage('收到');
        }, 1000);
      }
    },
    receiveMessage(text) {
      const currentTime = new Date().toLocaleString();
      console.log(currentTime);
      this.messages.push({
        text,
        type: 'received',
        avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80',
        time: currentTime,
      });
    },
  },
};
</script>
<style scoped>
.chat-header {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #5f5f60;
  margin-bottom: 15px;
  justify-content: center
}

.header-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.chat-window {
  max-width: 1400px;
  height: 80vh;
  margin: 30px auto 0;
  border: 1px solid #a8a8a9;
  border-radius: 10px;
  padding: 15px;
  background-color: #eeeeee;
  position: relative;
  overflow-y: auto;
}

.message-wrapper {
  margin: 10px 0;
}

.message-content {
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.text {
  background-color: #f2f3f5;
  padding: 10px;
  border-radius: 5px;
  max-width: 70%;
}

.sent .text {
  background-color: #11a806;
  color: #fff;
  align-self: flex-end;
  margin:0 10px;
}

.sent .message-content {
  flex-direction: row-reverse;
}
.time {
  font-size: 12px;
  color: #494949;
  margin-bottom: 5px;
}


.message-input {
  margin-top: 15px;
}
.sent-ipt {
  position: absolute;
  bottom: 30px;
  width: 80%;
  margin-left: 10%;
}
.chat-content {
  overflow: auto;
  height: 80%;
}
</style>
